<template>
  <div class="gallery-container" @click="handleChangeIsShow">
    <div class="wrapper">
      <swiper :options="swiperOption">
        <swiper-slide v-for= "item in imgs" :key= "item">
          <img
            class="gallery-img"
            :src="item"
          >
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>
<script>
export default {
  name: "detailGallery",
  props: {
    imgs: {
      type: Array,
      default: [
        "http://img1.qunarzz.com/sight/p0/1602/5a/5af5803099ae16ce90.water.jpg_r_800x800_2e19ea99.jpg",
        "http://img1.qunarzz.com/sight/p0/1610/c9/c9359719d6763e44a3.water.jpg_r_800x800_7f4480bc.jpg"
      ]
    }
  },
  data() {
    return {
      swiperOption: {
        pagination: ".swiper-pagination",
        paginationType: "fraction",
        observer: true,
        observeParents: true
      }
    };
  },
  methods: {
    handleChangeIsShow() {
      this.$emit("changeIsShow", false);
    }
  }
};
</script>
<style lang="less" scoped>
.gallery-container {
  // height: 3000px;
  // overflow: hidden;
  // position: absolute;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 1);
  z-index: 666;
  display: flex;
  align-items: center;
  /*横向居中*/
  // justify-content: center;
  /* flex方向改为垂直 */
  // flex-direction: column;
  .wrapper {
    // overflow: hidden;
    height: 0;
    width: 100%;
    padding-bottom: 68%;
    background-color: #fff;
    .swiper-pagination-bullet-active {
      background-color: #fff;
    }
    & /deep/.swiper-pagination {
      color: #fff;
    }
    & /deep/ .swiper-container {
      overflow: inherit;
    }
    & /deep/ .swiper-pagination-fraction {
      bottom: -0.8rem;
    }
    & /deep/ .gallery-img {
      width: 100%;
    }
  }
}
</style>
